import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/Detail.vue";

const router = createRouter({
    // history: createWebHistory(),
    history: createWebHashHistory(),
    routes: [
        {
            name:'shouye',
            path:'/home',
            component: Home
        },
        {
            name: 'xinwen',
            path:'/news',
            component: News,
            children:[
                {
                    name:'xiang',
                    //path:'detail/:id/:title/:subTitle/:content',
                    path:'detail',
                    component: Detail,
                    // 如果参数使用params类型传递，则只需要props设置为true
                    // 使用props路由参数原理： <Detail id="xxx" title="xxx" subTitle="xxx" content="xxx"/>
                    // 就是将参数转换成对象标签的参数，然后在Detail组件中使用defineProps(["id","title","subTitle","content"])定义参数接收
                    //props:true
                    // 如果参数使用query类型传递，则需要props为一个函数，参数为route对象
                    props(route) {
                        return route.query
                    }
                }
            ]
        },
        {
            name: 'guanyu',
            path:'/about',
            component: About
        }
    ]
})

export default router